<template>
    <div v-loading="loading">
        <template v-if="!isEmpty">
            <sceneplanItem v-for="item in list" :item="item" :key="item.id" />
            <div class="text-center mt-30">
                <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                    :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next"
                    :total="total" hide-on-single-page>
                </el-pagination>
            </div>
        </template>
        <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
    </div>
</template>

<script>
import sceneplanItem from './sceneplanItem.vue'
import { getSceneplanList } from "@/api/apis"
export default {
    name: "sceneplanModule",
    components: {
        sceneplanItem
    },
    props: {
        item: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            loading: true,
            supplierId: '',// 供应商ID
            list: [],// 场景方案列表
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
            }
        }
    },
    mounted () {
        if (this.$route.query.id) {
            this.supplierId = Number(this.$route.query.id)
        }
        if (this.supplierId) {
            this.getList()
        }
    },
    methods: {
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        // 获取场景方案列表
        getList () {
            let that = this
            that.loading = true
            getSceneplanList({ id: this.supplierId }).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    //that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length
                } else {
                    this.$message.error(res.msg)
                }
                that.loading = false
            })
        },
    }
}
</script>

<style lang="less" scoped>
.item {
    position: relative;
    padding: 30px;
    cursor: pointer;
    background: #FFF;
    transition: all 0.3s ease;
    text-decoration: none;

    &::after {
        content: '';
        height: 1px;
        background: rgba(46, 48, 51, .1);
        position: absolute;
        bottom: 0;
        left: 30px;
        right: 30px;
    }

    &:hover {
        z-index: 1;
        box-shadow: 0px 3px 6px 1px #EEE8E8;
        border-radius: 10px 10px 10px 10px;

        &::after {
            display: none;
        }

        h3 {
            color: #f15953;
        }

        img {
            transform: scale(1.04);
        }
    }

    .item-img {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        border-radius: 10px;
        overflow: hidden;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all .5s ease .1s;
        }
    }

    h3 {
        color: #2E3033;
        font-size: 18px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .desc {
        color: rgba(46, 48, 51, .6);
        font-size: 16px;
    }

    .attachment {
        color: #2E3033;
        margin-top: 15px;

        span {
            color: #f15953;
        }
    }

    .footer {
        margin-top: 15px;
        color: rgba(46, 48, 51, .6);
        font-size: 16px;

        time {
            display: block;



        }
    }

}
.el-tag {
    &+.el-tag {
        margin-left: 10px;
    }
}
</style>